<template>
	<div class="container">
        <div class="search-box">
            <el-select class="mr10" v-model="query.user_id" multiple filterable placeholder="用户名称">
                <el-option
                    v-for="user in UserList"
                    :key="user"
                    :label="user"
                    :value="user">
                </el-option> 
            </el-select>
            <el-button type="primary" :icon="Search" @click="handleSearch">搜索</el-button>
		</div>
        <el-table ref="multipleTable" :data="tableSplit()" border header-cell-class-name="table-header" 
            >
            <el-table-column prop="id" label="ID" width="55" align="center" show-overflow-tooltip></el-table-column>
            <el-table-column sortable prop="username" label="用户名" align="center" show-overflow-tooltip></el-table-column>
            <el-table-column prop="action_id" label="操作编号" align="center" show-overflow-tooltip></el-table-column>
            <el-table-column sortable prop="action_type" label="操作类型" align="center" show-overflow-tooltip>
                <template #default="scope">
                    <el-tag v-if="scope.row.action_type===-1" type="warning">清退</el-tag>
                    <el-tag v-if="scope.row.action_type===0" type="danger">删除</el-tag>
                    <el-tag v-if="scope.row.action_type===1" type="primary">编辑</el-tag>
                </template>
            </el-table-column>
            <el-table-column width="400px" prop="operate_details" label="操作内容" align="center" show-overflow-tooltip></el-table-column>
            <el-table-column prop="operate_time" label="操作时间" align="center" show-overflow-tooltip></el-table-column>
            <el-table-column sortable prop="step" label="流程步骤" align="center" show-overflow-tooltip></el-table-column>
            <el-table-column prop="reason_details" label="操作原因" align="center" show-overflow-tooltip></el-table-column>
            <el-table-column type="selection"></el-table-column>
        </el-table>
        <div class="pagination">
            <el-pagination
                background
                layout=" prev, pager, next,jumper,total"
                :current-page="state.pageIndex"
                :page-size="state.pageSize"
                :total="pageTotal"
                @current-change="handlePageChange"
            ></el-pagination>
        </div>
        <el-dialog
			:title="idEdit ? '编辑用户' : '新增用户'"
			v-model="addVisible"
			width="800px"
			destroy-on-close
			:close-on-click-modal="false"
		>
            <userEdit :data="rowData" :update='update' :edit='idEdit' />
		</el-dialog>
	</div>
</template>

<script setup lang="ts">
import { pa } from 'element-plus/es/locale';
import { ref,reactive, onMounted } from 'vue';
import { ElMessage, ElMessageBox } from 'element-plus';
import { Delete, Search,Edit,CirclePlusFilled } from '@element-plus/icons-vue';
import userEdit from './useredit.vue';
import useUser from '../../hooks/User/useUser';
import useRecord from '../../hooks/Record/useRecord'
import useUtils from '../../hooks/useUtils'
/* 项目检索 */
const pageTotal = ref(0);
const query = reactive({
	user_id: '',
	limit:20,
	pageIndex: 1,
	pageSize: 20,
	pageTotal:pageTotal
});
/* 检索信息方法 */
const { queryRecord } = useRecord()
const handleSearch = () => {
	if(query.user_id.length === 0){
		ElMessage({
			type: 'error',
			message: `请选中至少一个用户名！`,
		})
	}else{
		queryRecord(query).then( res => {
			tableData.value=res.data
			pageTotal.value=res.data.length
		})
	}
}
/* 创建表格模板 */                                                                                                                                                                         
interface TableItem { 
	id: number;
    username: string;
    action_id: string;
    action_type: string;
    action_tag: string;
    operate_details: string;
    reason_details: string;
    step: string;
}
const tableData = ref<TableItem[]>([]);
const state = reactive({
	page:1,
	limit:50,
	pageIndex: 1,
	pageSize: 50,
	total:pageTotal
})
/* 数据分页 */
const tableSplit = () => {
	return(tableData.value.filter(
		(item,index) => 
		index < state.page * state.limit && index >= state.limit*(state.page - 1)
	))
}
const handlePageChange = (val: number) => {
	state.pageIndex = val;
	state.page = val;
};

/* 添加用户 */
const index= ref(-1)
const addVisible = ref(false)
const idEdit = ref(false)
const rowData = ref({})
const userAdd = (idx:number,row:TableItem) => {
    index.value=idx;
    addVisible.value=true;
}
const { arrRemoveDup } = useUtils()
const UserList = ref([])

const { getRecord } = useRecord()
const reload = () => {
    getRecord().then( res=>{
        tableData.value=res.data
        pageTotal.value=res.data.length
        for(const [key,value] of Object.entries(res.data)){
            UserList.value.push(value["username"])
        }
        UserList.value = arrRemoveDup(UserList.value)
    })
}

const update = () => {

}
onMounted(()=>{
    reload()
})

</script>

<style scoped>
.search-box {
	margin-bottom: 20px;
	float:left
}

.mr10 {
	margin-right: 10px;
} 

.el-select {
	width: 500px;
}

.table-td-thumb {
	display: block;
	margin: auto;
	width: 40px;
	height: 40px;
}

.content-title {
    font-weight: 400;
    line-height: 50px;
    margin: 10px 0;
    font-size: 22px;
    color: #1f2f3d;
}
.upload-demo {
    width: 360px;
}

</style>

